<template>
  <view class="u_live">
    <scroll-view scroll-x="true" class="mb80" v-if="toplist">
      <view class="top_list d-s-c">
        <view v-for="(item, index) in toplist" :key="index" class="top_item">
          <view class="top_item_img">
            <image :src="item.userAvatarUrl" mode=""></image>
          </view>
          <view class="live_status">直播中</view>
          <view class="live_top_name">{{ item.userNickName }}</view>
        </view>
      </view>
    </scroll-view>
    <view class="uLive_top" v-if="scrollTopNum >= 185">
      <scroll-view scroll-x="true" class="">
        <view class="d-s-c">
          <view
            :class="params.isTop == 1 ? 'type_item_active' : 'type_item'"
            @click="chooseTop()"
            >热门</view
          >
          <view
            :class="params.isFollow == 1 ? 'type_item_active' : 'type_item'"
            @click="chooseFollow()"
            >关注</view
          >
          <view
            :class="
              categoryId == item.categoryId ? 'type_item_active' : 'type_item'
            "
            v-for="(item, index) in categorytype"
            :key="index"
            @click="chooseType(item.categoryId)"
            >{{ item.name }}</view
          >
        </view>
      </scroll-view>
    </view>
    <view class="live_content" v-if="categorytype != ''">
      <view>
        <scroll-view scroll-x="true" class="">
          <view class="d-s-c">
            <view
              :class="params.isTop == 1 ? 'type_item_active' : 'type_item'"
              @click="chooseTop()"
              >热门</view
            >
            <view
              :class="params.isFollow == 1 ? 'type_item_active' : 'type_item'"
              @click="chooseFollow()"
              >关注</view
            >
            <view
              :class="
                categoryId == item.categoryId ? 'type_item_active' : 'type_item'
              "
              v-for="(item, index) in categorytype"
              :key="index"
              @click="chooseType(item.categoryId)"
              >{{ item.name }}</view
            >
          </view>
        </scroll-view>
      </view>
      <view class="live_list" v-if="!isLoading && typelist">
        <template v-for="(liveitem, liveindex) in typelist" :key="liveindex">
          <view
            @click="toRoom(liveitem.roomId)"
            class="live_item"
            v-if="liveitem.liveStatus != 107"
          >
            <view class="live_item_status" v-if="liveitem.liveStatus == 103">
              <view class="live_item_statusL reLive">回放</view>
              <text class="live_item_statusR">直播回看</text>
            </view>
            <view class="live_item_status" v-if="liveitem.liveStatus == 101">
              <view class="live_item_statusL onLive">
                <image src="../../static/zhibo.gif" mode=""></image>
              </view>
              <text class="live_item_statusR">直播中</text>
            </view>
            <view class="live_item_status" v-if="liveitem.liveStatus == 102">
              <view class="live_item_statusL">预告</view>
              <text class="live_item_statusR">直播预告</text>
            </view>
            <view class="live_item_img">
              <image :src="liveitem.shareFilePath" mode="aspectFill"></image>
            </view>
            <view class="d-b-c live_item_b">
              <view class="live_item_bl">
                <view class="live_item_blt">{{ liveitem.name }}</view>
                <view class="d-s-c live_item_blb">
                  <view class="live_item_blbimg">
                    <image :src="liveitem.userAvatarUrl" mode=""></image>
                  </view>
                  <view class="live_item_blbtxt">{{
                    liveitem.userNickName
                  }}</view>
                </view>
              </view>
              <view class="live_item_brbox" v-if="liveitem.product">
                <view class="live_item_br">
                  <image
                    :src="liveitem.product.image[0].filePath"
                    mode=""
                  ></image>
                </view>
                <view class="live_item_brb"
                  >￥{{ liveitem.product.productPrice }}</view
                >
              </view>
            </view>
          </view>
        </template>
      </view>
      <!-- 没有记录 -->
      <view class="d-c-c p30" v-if="typelist.length == 0 && !isLoading">
        <text class="iconfont icon-wushuju"></text>
        <text class="cont">亲，暂无相关记录哦</text>
      </view>
      <uni-load-more v-else :loadingType="loadingType"></uni-load-more>
    </view>
  </view>
</template>

<script>
import uniLoadMore from "@/components/uni-load-more.vue";
export default {
  components: {
    uniLoadMore,
  },
  data() {
    return {
      /* 设备高度 */
      phoneHeight: 0,
      /* 滑动窗口高度 */
      scrollviewHigh: 0,
      /* 类别列表 */
      categorytype: [],
      /* 当前选中的类别 */
      categoryId: 0,
      roomlist: [],
      /* 直播列表 */
      typelist: [],
      isLoading: true,
      /*底部加载*/
      loading: true,
      /*没有更多*/
      no_more: false,
      /*当前页面*/
      page: 1,
      /* 滚动条高度 */
      scrollTopNum: 0,
      params: {
        isTop: 1,
      },
      toplist: [],
    };
  },
  computed: {
    /*加载中状态*/
    loadingType() {
      if (this.isLoading) {
        return 1;
      } else {
        if (this.typelist.length != 0 && this.no_more) {
          return 2;
        } else {
          return 0;
        }
      }
    },
  },
  onShow() {
    this.getCategory();
  },
  onPageScroll(res) {
    this.scrollTopNum = res.scrollTop;
    console.log(res.scrollTop); //距离页面顶部距离
  },
  methods: {
    /*可滚动视图区域到底触发*/
    onReachBottom() {
      let self = this;
      if (self.no_more) {
        return;
      }
      self.page++;
      if (self.page <= self.last_page) {
        self.getData();
      } else {
        self.no_more = true;
      }
    },
    /*初始化*/
    init() {
      let _this = this;
      uni.getSystemInfo({
        success(res) {
          _this.phoneHeight = res.windowHeight;
        },
      });
    },
    getCategory() {
      let self = this;
      self.isLoading = true;
      self._post("plus/live/roomApply/category", {}, function (res) {
        self.categorytype = res.data;
        self.typelist.length = self.categorytype.length;
        self.typelist[0] = res.data[0];
        self.getData();
        self.init();
      });
    },
    getData() {
      let self = this;
      self.isLoading = true;
      uni.showLoading({
        title: "加载中...",
      });
      let params = self.params;
      self._postBody(
        "plus/live/room/lists",
        {
          ...params,
        },
        function (res) {
          self.toplist = res.data.live;
          self.typelist = res.data.list.records;
          uni.hideLoading();
          self.isLoading = false;
          self.last_page = res.data.list.lastPage;
          if (res.data.list.lastPage <= 1) {
            self.no_more = true;
          } else {
            self.no_more = false;
          }
          console.log(res.data, "-----------1111111----------");
        }
      );
    },
    chooseType(id) {
      let self = this;
      self.categoryId = id;
      console.log(self.categoryId);
      self.params = {
        categoryId: self.categoryId,
      };
      self.getData();
    },
    chooseTop() {
      let self = this;
      self.params = {
        isTop: 1,
      };
      self.categoryId = 0;
      self.getData();
    },
    chooseFollow() {
      let self = this;
      self.params = {
        isFollow: 1,
      };
      self.categoryId = 0;
      self.getData();
    },
    toRoom(e) {
      if (e.liveStatus == 103) {
        if (e.recordUrl != "") {
          this.gotoPage("/pagesLive/live/playback?roomId=" + e.roomId);
        } else {
          this.showError("暂无回放");
        }
      } else {
        let roomID = parseInt(e);
        console.log(e, "room");
        this.gotoPage("/pagesLive/live/live?roomId=" + roomID + "&sence=join");
      }
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f1f1f1;
}

.u_live {
}

.mb80 {
  margin-bottom: 80rpx;
}

.uLive_top {
  position: fixed;
  z-index: 1000;
  background: #f5f5f5;
  top: 0;
  left: 0;
}

.top_list {
  padding: 26rpx;
}

.top_item {
  text-align: center;
  position: relative;
  margin-right: 22rpx;
}

.top_item_img {
  width: 120rpx;
  height: 120rpx;
  padding: 4rpx;
  border-radius: 50%;
  border: 2rpx solid #da7399;
  margin-bottom: 20rpx;
}

.live_status {
  position: absolute;
  top: 105rpx;
  left: 14rpx;
  width: 105rpx;
  height: 30rpx;
  background-color: #f2517b;
  color: #ffffff;
  font-size: 20rpx;
  text-align: center;
  line-height: 30rpx;
  border-radius: 15rpx;
  letter-spacing: 2rpx;
}

.live_top_name {
  letter-spacing: 4rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 132rpx;
  text-align: center;
}

.top_item_img image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
}

.type_item {
  padding: 0 20rpx;
  flex-shrink: 0;
  height: 44rpx;
  line-height: 44rpx;
  font-size: 25rpx;
  color: #000000;
  text-align: center;
  margin-left: 19rpx;
  letter-spacing: 3rpx;
}

.type_item_active {
  padding: 0 20rpx;
  flex-shrink: 0;
  height: 44rpx;
  line-height: 44rpx;
  font-size: 25rpx;
  color: #ffffff;
  text-align: center;
  margin-left: 19rpx;
  background-color: #fb4a74;
  border-radius: 22rpx;
  letter-spacing: 3rpx;
}

.live_content {
  padding-top: 30rpx;
  background-color: #f6f6f6;
}

.live_list {
  padding: 29rpx 26rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.live_list .live_item {
  position: relative;
  width: 343rpx;
  height: 431rpx;
  height: 591rpx;
  background-color: #ffffff;
  margin-bottom: 16rpx;
  border-radius: 10rpx;
  overflow: hidden;
}

.live_item_img image {
  width: 343rpx;
  height: 431rpx;
}

.live_item_b {
  padding: 19rpx 16rpx;
}

.live_item_blt {
  width: 182rpx;
  font-size: 26rpx;
  line-height: 39rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-bottom: 5rpx;
}

.live_item_blbimg image {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}

.live_item_blbtxt {
  font-size: 21rpx;
  color: #a8a8a8;
}

.live_item_br image {
  width: 90rpx;
  height: 90rpx;
  border-radius: 10rpx;
}

.live_item_brb {
  height: 32rpx;
  line-height: 32rpx;
  font-size: 20rpx;
  color: red;
}

.live_item_status {
  position: absolute;
  display: flex;
  justify-content: flex-start;
  height: 30rpx;
  line-height: 30rpx;
  border-radius: 15rpx;
  background-color: rgba($color: #000000, $alpha: 0.6);
  padding-right: 11rpx;
  font-size: 19rpx;
  top: 15rpx;
  left: 16rpx;
}

.live_item_statusL {
  color: #ffffff;
  height: 30rpx;
  line-height: 30rpx;
  border-radius: 15rpx;
  padding: 0 10rpx;
  background-color: #60d785;
  margin-right: 5rpx;
}

.reLive {
  background-color: #ff6633;
}

.onLive {
  background-color: #fb4a74;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.live_item_statusR {
  color: #ffffff;
}

.live_item_statusL image {
  width: 30rpx;
  height: 30rpx;
}

.live_item_brbox {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
